<template>
  <div class="resume-pagination">
    <el-pagination :page-size="params.pageSize" layout="slot" :total="total">
      <el-button @click="jumpPage('1')">首页</el-button>
    </el-pagination>
    <el-pagination
      :page-size="params.pageSize"
      layout="prev,pager, next, slot"
      :total="total"
      :current-page="params.currPageNo"
      @current-change="getNowPagee"
    >
      <el-button @click="jumpPage('0')">尾页</el-button>
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ['total'],
  data() {
    return {
      params: {
        currPageNo: 1,
        pageSize: 20
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let prev = document.querySelector('.btn-prev')
      prev.innerHTML = '上一页'
      let next = document.querySelector('.btn-next ')
      next.innerHTML = '下一页'
    },
    jumpPage(val) {
      switch (val) {
        case '1': //跳转到首页
          this.params.currPageNo = 1
          this.$emit('hasPage', this.params.currPageNo)
          this.$emit('on-pitch', true)
          break
        case '0': //跳转到末页
          this.params.currPageNo = Math.ceil(this.total / this.params.pageSize)
          this.$emit('hasPage', this.params.currPageNo)
          this.$emit('on-pitch', true)
          break
      }
    },
    getNowPagee(val) {
      this.params.currPageNo = val
      this.$emit('hasPage', this.params.currPageNo)
      this.$emit('on-pitch', true)
    }
  },
  components: {}
}
</script>

<style lang="scss">
.resume-pagination {
  margin: 30px 0 100px 0;
  display: flex;
  justify-content: center;
  .el-pagination {
    text-align: center;
    .el-button {
      width: 70px;
      height: 30px;
      font-size: 12px;
      color: #666;
      background: #fff;
      border-radius: 0;
    }
    .el-pager {
      li {
        width: 30px;
        height: 30px;
        margin: 0 5px;
        background-color: #fff;
        color: #666;
        font-size: 12px;
        &:hover {
          color: #f15c18;
        }
      }
    }
    .el-pager li.active {
      color: #f15c18;
    }
    .btn-prev {
      width: 70px;
      height: 30px;
      margin: 0 10px 0 10px;
      background: #fff;
      &:hover {
        color: #f15c18;
      }
      i {
        display: none;
      }
    }
    .btn-next {
      width: 70px;
      height: 30px;
      margin: 0 10px 0 10px;
      background: #fff;
      &:hover {
        color: #f15c18;
      }
      i {
        display: none;
      }
    }
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #fff;
    color: #f15c18;
  }
}
</style>
